<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>合约详情 - 周末登山交友合约交友</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdncdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/cssdist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #3b82f6;
            --primary-light: #93c5fd;
            --primary-dark: #1d4ed8;
            --secondary: #ec4899;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --light-bg: #f3f4f6;
            --card-bg: #ffffff;
            --text-primary: #111827;
            --text-secondary: #6b7280;
            --border-color: #e5e7eb;
            --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
            --transition: all 0.2s ease;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--light-bg);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 65px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--card-bg);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            border-bottom: 1px solid var(--border-color);
            z-index: 1000;
        }
        
        .nav-title {
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        .nav-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        
        .nav-btn:hover {
            background-color: var(--light-bg);
            color: var(--primary);
        }
        
        /* 图片轮播 */
        .image-slider {
            position: relative;
            height: 220px;
            overflow: hidden;
        }
        
        .slider-wrapper {
            display: flex;
            height: 100%;
            transition: transform 0.3s ease;
        }
        
        .slider-image {
            width: 100%;
            height: 100%;
            flex-shrink: 0;
            object-fit: cover;
        }
        
        .slider-indicator {
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 6px;
        }
        
        .indicator-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
        }
        
        .indicator-dot.active {
            background-color: white;
        }
        
        .image-count {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
        }
        
        /* 合约标题与状态 */
        .contract-header {
            padding: 16px;
            background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
        }
        
        .contract-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .contract-status {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 0.85rem;
            font-weight: 500;
            margin-bottom: 12px;
        }
        
        .status-recruiting {
            background-color: rgba(16, 185, 129, 0.1);
            color: var(--success);
        }
        
        .status-full {
            background-color: rgba(239, 68, 68, 0.1);
            color: var(--danger);
        }
        
        .status-soon {
            background-color: rgba(245, 158, 11, 0.1);
            color: var(--warning);
        }
        
        /* 合约基本信息 */
        .contract-meta {
            padding: 16px;
            background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
        }
        
        .meta-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        
        .meta-item {
            display: flex;
            flex-direction: column;
        }
        
        .meta-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-bottom: 4px;
        }
        
        .meta-value {
            font-size: 0.95rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        /* 发起人信息 */
        .host-info {
            padding: 16px;
            background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .host-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .host-details {
            flex: 1;
        }
        
        .host-name {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .host-rating {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
        }
        
        .rating-stars {
            color: var(--warning);
            font-size: 0.9rem;
        }
        
        .rating-count {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        .host-meta {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        .host-action {
            padding: 6px 14px;
            border: 1px solid var(--primary);
            color: var(--primary);
            background-color: transparent;
            border-radius: 6px;
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        /* 合约详情内容 */
        .contract-content {
            padding: 16px;
            background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
        }
        
        .content-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .content-text {
            font-size: 0.95rem;
            line-height: 1.6;
            color: var(--text-primary);
            margin-bottom: 16px;
        }
        
        .content-image {
            width: 100%;
            border-radius: 8px;
            margin-bottom: 16px;
        }
        
        /* 合约标签 */
        .contract-tags {
            padding: 16px;
            background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
        }
        
        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .contract-tag {
            padding: 4px 12px;
            background-color: rgba(59, 130, 246, 0.1);
            color: var(--primary);
            border-radius: 16px;
            font-size: 0.85rem;
        }
        
        /* 参与者列表 */
        .participants {
            padding: 16px;
            background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
        }
        
        .participants-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .participants-title {
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        .participants-count {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        
        .participants-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
        }
        
        .participant-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .participant-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 6px;
        }
        
        .participant-name {
            font-size: 0.8rem;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
        }
        
        .host-badge {
            display: inline-block;
            background-color: var(--primary);
            color: white;
            font-size: 0.6rem;
            padding: 1px 4px;
            border-radius: 3px;
            margin-top: 2px;
        }
        
        /* 操作按钮区 */
        .action-buttons {
            padding: 12px 16px;
            background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            gap: 10px;
        }
        
        .primary-action {
            flex: 2;
            padding: 12px 0;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 500;
            font-size: 0.95rem;
        }
        
        .secondary-action {
            flex: 1;
            padding: 12px 0;
            background-color: transparent;
            border: 1px solid var(--primary);
            color: var(--primary);
            border-radius: 8px;
            font-weight: 500;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        
        /* 留言区 */
        .comments-section {
            padding: 16px;
            background-color: var(--card-bg);
        }
        
        .comments-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .comments-title {
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        /* 留言输入框 */
        .comment-input-container {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .comment-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .comment-input-wrapper {
            flex: 1;
        }
        
        .comment-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: 20px;
            background-color: var(--light-bg);
            font-size: 0.9rem;
            resize: none;
            height: 40px;
        }
        
        .comment-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 8px;
        }
        
        .comment-btn {
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        .cancel-btn {
            background-color: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
        }
        
        .send-btn {
            background-color: var(--primary);
            color: white;
            border: none;
        }
        
        /* 留言列表 */
        .comments-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .comment-item {
            display: flex;
            gap: 10px;
        }
        
        .comment-content {
            flex: 1;
        }
        
        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;
        }
        
        .comment-author {
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        .comment-time {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }
        
        .comment-text {
            font-size: 0.9rem;
            background-color: var(--light-bg);
            padding: 8px 12px;
            border-radius: 12px;
            margin-bottom: 6px;
        }
        
        .comment-actions {
            display: flex;
            gap: 16px;
        }
        
        .comment-action {
            font-size: 0.8rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 回复样式 */
        .replies {
            margin-left: 30px;
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .reply-item {
            display: flex;
            gap: 8px;
        }
        
        .reply-content {
            flex: 1;
        }
        
        .reply-text {
            font-size: 0.85rem;
            background-color: var(--light-bg);
            padding: 6px 10px;
            border-radius: 10px;
            margin-bottom: 4px;
        }
        
        .reply-text .author {
            color: var(--primary);
            font-weight: 500;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 65px;
            background-color: var(--card-bg);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-color);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--text-secondary);
            font-size: 0.7rem;
            text-decoration: none;
        }
        
        .nav-item i {
            font-size: 1.25rem;
            margin-bottom: 4px;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        /* 提示消息 */
        .toast {
            position: fixed;
            top: 60px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 0.9rem;
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">合约详情</div>
        <button class="nav-btn" id="shareBtn">
            <i class="fas fa-share-alt"></i>
        </button>
    </div>
    
    <!-- 图片轮播 -->
    <div class="image-slider">
        <div class="slider-wrapper" id="sliderWrapper">
            <img src="https://picsum.photos/id/29/800/600" alt="活动图片1" class="slider-image">
            <img src="https://picsum.photos/id/30/800/600" alt="活动图片2" class="slider-image">
            <img src="https://picsum.photos/id/31/800/600" alt="活动图片3" class="slider-image">
        </div>
        <div class="image-count">1/3</div>
        <div class="slider-indicator">
            <div class="indicator-dot active"></div>
            <div class="indicator-dot"></div>
            <div class="indicator-dot"></div>
        </div>
    </div>
    
    <!-- 合约标题与状态 -->
    <div class="contract-header">
        <h1 class="contract-title">周末登山交友活动 - 新手友好路线</h1>
        <span class="contract-status status-recruiting">招募中 (8/12人)</span>
        
        <div class="contract-meta-short">
            <div class="meta-item">
                <i class="far fa-calendar-alt"></i>
                <span>2023-10-28 周六 08:00-12:00</span>
            </div>
        </div>
    </div>
    
    <!-- 合约基本信息 -->
    <div class="contract-meta">
        <div class="meta-grid">
            <div class="meta-item">
                <span class="meta-label">活动地点</span>
                <span class="meta-value">
                    <i class="fas fa-map-marker-alt"></i>
                    青山国家森林公园
                </span>
            </div>
            <div class="meta-item">
                <span class="meta-label">距离</span>
                <span class="meta-value">
                    <i class="fas fa-road"></i>
                    5.2公里
                </span>
            </div>
            <div class="meta-item">
                <span class="meta-label">费用</span>
                <span class="meta-value">
                    <i class="fas fa-wallet"></i>
                    ¥88/人
                </span>
            </div>
            <div class="meta-item">
                <span class="meta-label">难度</span>
                <span class="meta-value">
                    <i class="fas fa-signal"></i>
                    初级 (新手友好)
                </span>
            </div>
            <div class="meta-item">
                <span class="meta-label">集合地点</span>
                <span class="meta-value">
                    <i class="fas fa-flag"></i>
                    公园东入口停车场
                </span>
            </div>
            <div class="meta-item">
                <span class="meta-label">联系方式</span>
                <span class="meta-value">
                    <i class="fas fa-phone"></i>
                    活动群内公布
                </span>
            </div>
        </div>
    </div>
    
    <!-- 发起人信息 -->
    <div class="host-info">
        <img src="https://picsum.photos/id/64/200/200" alt="发起人头像" class="host-avatar">
        <div class="host-details">
            <div class="host-name">山行者</div>
            <div class="host-rating">
                <div class="rating-stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
                <div class="rating-count">4.8 (32条评价)</div>
            </div>
            <div class="host-meta">户外领队 · 3年经验 · 已组织56次活动</div>
        </div>
        <button class="host-action">关注</button>
    </div>
    
    <!-- 合约详情内容 -->
    <div class="contract-content">
        <h3 class="content-title">活动详情</h3>
        <p class="content-text">
            本次活动为新手友好型登山路线，全程约5公里，耗时约4小时，海拔上升约300米。路线以平缓山路为主，适合初次体验登山的朋友。
        </p>
        <p class="content-text">
            山顶有观景台，可以俯瞰城市全景，是拍照的好地方。我们会提供简单早餐和饮用水，建议参与者穿着舒适的运动鞋和运动服装，做好防晒准备。
        </p>
        <img src="https://picsum.photos/id/32/800/400" alt="活动详情图片" class="content-image">
        <p class="content-text">
            集合时间：早上8:00准时在公园东入口停车场集合，8:15准时出发，过时不候。
        </p>
        <p class="content-text">
            注意事项：
        </p>
        <p class="content-text">
            1. 请准时到达集合地点，过时不候；<br>
            2. 穿着舒适的运动鞋和运动服装；<br>
            3. 可携带少量零食和个人药品；<br>
            4. 请爱护环境，不随意丢弃垃圾；<br>
            5. 活动过程中请听从组织者安排。
        </p>
    </div>
    
    <!-- 合约标签 -->
    <div class="contract-tags">
        <div class="tags-container">
            <span class="contract-tag">登山</span>
            <span class="contract-tag">户外</span>
            <span class="contract-tag">运动</span>
            <span class="contract-tag">新手友好</span>
            <span class="contract-tag">周末</span>
            <span class="contract-tag">交友</span>
            <span class="contract-tag">拍照</span>
        </div>
    </div>
    
    <!-- 参与者列表 -->
    <div class="participants">
        <div class="participants-header">
            <h3 class="participants-title">已报名参与者</h3>
            <span class="participants-count">8人已报名，还可报名4人</span>
        </div>
        <div class="participants-grid">
            <div class="participant-item">
                <img src="https://picsum.photos/id/64/100/100" alt="参与者头像" class="participant-avatar">
                <span class="participant-name">山行者</span>
                <span class="host-badge">发起人</span>
            </div>
            <div class="participant-item">
                <img src="https://picsum.photos/id/65/100/100" alt="参与者头像" class="participant-avatar">
                <span class="participant-name">风之子</span>
            </div>
            <div class="participant-item">
                <img src="https://picsum.photos/id/66/100/100" alt="参与者头像" class="participant-avatar">
                <span class="participant-name">云中游</span>
            </div>
            <div class="participant-item">
                <img src="https://picsum.photos/id/67/100/100" alt="参与者头像" class="participant-avatar">
                <span class="participant-name">海之蓝</span>
            </div>
            <div class="participant-item">
                <img src="https://picsum.photos/id/68/100/100" alt="参与者头像" class="participant-avatar">
                <span class="participant-name">阳光</span>
            </div>
            <div class="participant-item">
                <img src="https://picsum.photos/id/69/100/100" alt="参与者头像" class="participant-avatar">
                <span class="participant-name">小雨</span>
            </div>
            <div class="participant-item">
                <img src="https://picsum.photos/id/70/100/100" alt="参与者头像" class="participant-avatar">
                <span class="participant-name">星辰</span>
            </div>
            <div class="participant-item">
                <img src="https://picsum.photos/id/71/100/100" alt="参与者头像" class="participant-avatar">
                <span class="participant-name">明月</span>
            </div>
        </div>
    </div>
    
    <!-- 操作按钮区 -->
    <div class="action-buttons">
        <button class="secondary-action">
            <i class="fas fa-heart"></i>
            收藏
        </button>
        <button class="secondary-action">
            <i class="fas fa-share-alt"></i>
            分享
        </button>
        <button class="primary-action" id="applyBtn">申请加入</button>
    </div>
    
    <!-- 留言区 -->
    <div class="comments-section">
        <div class="comments-header">
            <h3 class="comments-title">留言讨论 (12)</h3>
        </div>
        
        <!-- 留言输入框 -->
        <div class="comment-input-container">
            <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="comment-avatar">
            <div class="comment-input-wrapper">
                <textarea class="comment-input" placeholder="写下你的疑问或想法..."></textarea>
                <div class="comment-actions">
                    <button class="comment-btn cancel-btn">取消</button>
                    <button class="comment-btn send-btn">发送</button>
                </div>
            </div>
        </div>
        
        <!-- 留言列表 -->
        <div class="comments-list">
            <!-- 留言1 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/65/100/100" alt="评论者头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <span class="comment-author">风之子</span>
                        <span class="comment-time">2小时前</span>
                    </div>
                    <div class="comment-text">请问需要自带登山杖吗？还是组织者会提供？</div>
                    <div class="comment-actions">
                        <span class="comment-action">
                            <i class="far fa-thumbs-up"></i> 3
                        </span>
                        <span class="comment-action reply-btn">
                            <i class="far fa-comment"></i> 回复
                        </span>
                    </div>
                    
                    <!-- 回复 -->
                    <div class="replies">
                        <div class="reply-item">
                            <img src="https://picsum.photos/id/64/100/100" alt="回复者头像" class="comment-avatar">
                            <div class="comment-content">
                                <div class="comment-header">
                                    <span class="comment-author">山行者</span>
                                    <span class="comment-time">1小时前</span>
                                </div>
                                <div class="reply-text">
                                    <span class="author">@风之子</span> 建议自带，如果没有我们也会准备几根公用的
                                </div>
                                <div class="comment-actions">
                                    <span class="comment-action">
                                        <i class="far fa-thumbs-up"></i> 1
                                    </span>
                                    <span class="comment-action reply-btn">
                                        <i class="far fa-comment"></i> 回复
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 留言2 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/66/100/100" alt="评论者头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <span class="comment-author">云中游</span>
                        <span class="comment-time">昨天 18:30</span>
                    </div>
                    <div class="comment-text">这个路线我之前走过，风景确实不错，山顶的视野特别好！</div>
                    <div class="comment-actions">
                        <span class="comment-action">
                            <i class="far fa-thumbs-up"></i> 8
                        </span>
                        <span class="comment-action reply-btn">
                            <i class="far fa-comment"></i> 回复
                        </span>
                    </div>
                </div>
            </div>
            
            <!-- 留言3 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/70/100/100" alt="评论者头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <span class="comment-author">星辰</span>
                        <span class="comment-time">昨天 15:20</span>
                    </div>
                    <div class="comment-text">请问有停车场吗？开车过去方便吗？</div>
                    <div class="comment-actions">
                        <span class="comment-action">
                            <i class="far fa-thumbs-up"></i> 2
                        </span>
                        <span class="comment-action reply-btn">
                            <i class="far fa-comment"></i> 回复
                        </span>
                    </div>
                    
                    <!-- 回复 -->
                    <div class="replies">
                        <div class="reply-item">
                            <img src="https://picsum.photos/id/64/100/100" alt="回复者头像" class="comment-avatar">
                            <div class="comment-content">
                                <div class="comment-header">
                                    <span class="comment-author">山行者</span>
                                    <span class="comment-time">昨天 16:05</span>
                                </div>
                                <div class="reply-text">
                                    <span class="author">@星辰</span> 有的，东入口有停车场，停车很方便
                                </div>
                                <div class="comment-actions">
                                    <span class="comment-action">
                                        <i class="far fa-thumbs-up"></i> 0
                                    </span>
                                    <span class="comment-action reply-btn">
                                        <i class="far fa-comment"></i> 回复
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-handshake"></i>
            <span>合约</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-plus-circle"></i>
            <span>发布</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-comment"></i>
            <span>消息</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 提示消息 -->
    <div class="toast" id="toastMessage"></div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const backBtn = document.getElementById('backBtn');
        const shareBtn = document.getElementById('shareBtn');
        const applyBtn = document.getElementById('applyBtn');
        const sliderWrapper = document.getElementById('sliderWrapper');
        const sliderImages = document.querySelectorAll('.slider-image');
        const indicatorDots = document.querySelectorAll('.indicator-dot');
        const imageCount = document.querySelector('.image-count');
        const replyBtns = document.querySelectorAll('.reply-btn');
        const sendBtn = document.querySelector('.send-btn');
        const cancelBtn = document.querySelector('.cancel-btn');
        const commentInput = document.querySelector('.comment-input');
        const toastMessage = document.getElementById('toastMessage');
        
        // 当前轮播图索引
        let currentSlide = 0;
        
        // 初始化
        function init() {
            setupEventListeners();
            setupImageSlider();
        }
        
        // 设置图片轮播
        function setupImageSlider() {
            // 自动轮播
            setInterval(nextSlide, 5000);
            
            // 点击指示器切换图片
            indicatorDots.forEach((dot, index) => {
                dot.addEventListener('click', () => {
                    goToSlide(index);
                });
            });
        }
        
        // 切换到下一张图片
        function nextSlide() {
            currentSlide = (currentSlide + 1) % sliderImages.length;
            updateSlider();
        }
        
        // 切换到指定图片
        function goToSlide(index) {
            currentSlide = index;
            updateSlider();
        }
        
        // 更新轮播状态
        function updateSlider() {
            // 移动图片容器
            sliderWrapper.style.transform = `translateX(-${currentSlide * 100}%)`;
            
            // 更新指示器
            indicatorDots.forEach((dot, index) => {
                if (index === currentSlide) {
                    dot.classList.add('active');
                } else {
                    dot.classList.remove('active');
                }
            });
            
            // 更新图片计数
            imageCount.textContent = `${currentSlide + 1}/${sliderImages.length}`;
        }
        
        // 设置事件监听
        function setupEventListeners() {
            // 返回按钮
            backBtn.addEventListener('click', () => {
                history.back();
                showToast('返回列表');
            });
            
            // 分享按钮
            shareBtn.addEventListener('click', () => {
                showToast('分享功能已打开');
            });
            
            // 申请加入按钮
            applyBtn.addEventListener('click', () => {
                showToast('申请已发送，等待组织者确认');
                applyBtn.textContent = '已申请';
                applyBtn.disabled = true;
                applyBtn.style.opacity = '0.8';
            });
            
            // 回复按钮
            replyBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const author = this.closest('.comment-content').querySelector('.comment-author').textContent;
                    commentInput.value = `@${author} `;
                    commentInput.focus();
                    // 自动调整输入框高度
                    adjustTextareaHeight();
                });
            });
            
            // 发送留言
            sendBtn.addEventListener('click', () => {
                const commentText = commentInput.value.trim();
                if (commentText) {
                    showToast('留言已发送');
                    commentInput.value = '';
                    adjustTextareaHeight();
                    // 实际应用中这里会添加新留言到列表
                } else {
                    showToast('请输入留言内容');
                }
            });
            
            // 取消留言
            cancelBtn.addEventListener('click', () => {
                commentInput.value = '';
                adjustTextareaHeight();
            });
            
            // 监听输入框变化，自动调整高度
            commentInput.addEventListener('input', adjustTextareaHeight);
            
            // 点赞功能
            document.querySelectorAll('.comment-action').forEach(action => {
                if (action.querySelector('.fa-thumbs-up')) {
                    action.addEventListener('click', function() {
                        const icon = this.querySelector('i');
                        const countElem = this.childNodes[2];
                        let count = parseInt(countElem.textContent.trim());
                        
                        if (icon.classList.contains('far')) {
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            this.style.color = 'var(--primary)';
                            countElem.textContent = ` ${count + 1}`;
                            showToast('点赞成功');
                        } else {
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            this.style.color = 'var(--text-secondary)';
                            countElem.textContent = ` ${count - 1}`;
                        }
                    });
                }
            });
        }
        
        // 调整文本框高度
        function adjustTextareaHeight() {
            // 重置高度
            commentInput.style.height = 'auto';
            // 设置新高度（最小40px）
            commentInput.style.height = Math.max(40, commentInput.scrollHeight) + 'px';
        }
        
        // 显示提示消息
        function showToast(message) {
            toastMessage.textContent = message;
            toastMessage.classList.add('show');
            setTimeout(() => {
                toastMessage.classList.remove('show');
            }, 2000);
        }
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>
